<template>
  <div class="">
    <div>
      <div v-if="bannerCenterData" class="bannerLong" >
        <img class="img_banner_one" :src="bannerCenterData.img" @click="onBanner(bannerCenterData.fengmianLinks)" />
      </div>
    </div>

    <div class="cardDiv2">
      <div class="infoPublic">
        <div class="infoTop">
          <div class="infoPublicImg"><img   src="@/assets/infopublic_icon.png"/></div>
          <div class="infoPublicText">信用评价</div>
          <div class="more" @click="toCreditPage"> 更多&nbsp;> </div>
        </div>
        <div style="height:2px;width:100%;border-top:1px solid #ccc;float:left;margin-top:10px;"></div>
        <div>
          <a-table :columns="xypjColumnsData" :data-source="xtpjData" rowKey="id" :pagination="false">
            <template slot="xh" slot-scope="text, record, index">
              {{ index + 1 }}
            </template>
            <template slot="dwlb" slot-scope="text">
<!--              <div>{{ text }}</div>-->
<!--              <div>666</div>-->
              <span>{{ dictText('单位类别',text) }}</span>
            </template>
            <template slot="creditLevel" slot-scope="text">
              <!--              <div>{{ text }}</div>-->
              <!--              <div>666</div>-->
              <span>{{ dictText('信用等级类别',text) }}</span>
            </template>
            <template slot="dataBf" slot-scope="record">
             <span v-if="record!=='' && record!==null">{{ moment(record).format("YYYY-MM-DD") }}</span>
            </template>
            <template slot="effictivedateto" slot-scope="record">
              <span v-if="record!=='' && record!==null">{{ moment(record).format("YYYY-MM-DD") }}</span>
            </template>
          </a-table>
        </div>
      </div>
      <div class="statisticalData">
        <div class="infoTop">
          <div class="infoPublicImg"><img style="width:21px;height:21px;" src="@/assets/statisticalData_icon.png"/></div>
          <div class="infoPublicText">统计数据</div>
        </div>
        <div style="height:2px;width:100%;border-top:1px solid #ccc;float:left;margin-top:10px;"></div>
        <div class="card-div">
          <a-card style="width: 100%;margin-top:20px;" :bodyStyle='cardHeightOne'>
            <div class="item-wrap" align="center">
                <div class="one-item" @click="sDataView(1)" style="padding-top:5px;">
                  <img class="item_wrap_img" src="@/assets/total_release.png" alt="">
                  <div class="text"> 信息发布总量 </div>
                  <div class="num">{{totalData.total}}<span class="text"> 条 </span></div>
                </div >
                <div class="dashed-vertical"></div>
                <div class="one-item" @click="sDataView(2)" style="padding-top:5px;">
                  <img class="item_wrap_img" src="@/assets/total_projPub.png" alt="">
                  <div class="text">项目信息公开总量</div>
                  <div class="num">{{totalData.total_xmxx}}<span class="text"> 条 </span></div>
                </div>
            </div>
            <div class="dashed-horizontal-div" >
              <div class="dashed-horizontal-left"></div>
              <div class="dashed-horizontal-right"></div>
            </div>

            <div class="item-wrap" align="center">
                <div class="one-item" @click="sDataView(3)" >
                  <img class="item_wrap_img" src="@/assets/total_creditPub.png" alt="">
                  <div class="text"> 信用信息公开总量 </div>
                  <div class="num">{{totalData.total_xypj}}<span class="text"> 条 </span></div>
                </div >
                <div class="dashed-vertical"></div>
                <div class="one-item" @click="sDataView(4)">
                  <img class="item_wrap_img" src="@/assets/total_otherPub.png" alt="">
                  <div class="text"> 其他信息公开总量</div>
                  <div class="num">{{totalData.total_qt}}<span class="text"> 条 </span></div>
                </div>
            </div>
          </a-card>
        </div>
      </div>



    </div>
    <div class="banner_center_div">
      <img v-if="bannerLeftData" class="img_banner" :src="bannerLeftData.img" @click="onBanner(bannerLeftData.fengmianLinks)"/>
      <!-- <img v-else class="img_banner-no" /> -->

      <img  v-if="bannerRightData"  class="img_banner img_banner_right" :src="bannerRightData.img" @click="onBanner(bannerRightData.fengmianLinks)"/>
      <!-- <img v-else class="img_banner-no img_banner_right" /> -->

    </div>
  </div>
</template>
<script>
import api from '@/api/index'
  export default {
    name: "item2",
    data() {
      return {
        cardHeightOne:{"height": "305px"},
        totalData:{
          total:0,
          total_xmxx:0,
          total_xypj:0,
          total_qt:0,
        },
        imgPath:this.$globalConfig.adressPath,
        xypjColumnsData:[
            {
              title: '序号',
              dataIndex: 'xh',
              key: 'xh',
              width:70,
              scopedSlots: { customRender: "xh" }
            },
            {
              title: '单位名称',
              dataIndex: 'nameUnit',
              key: 'nameUnit',
              ellipsis: true,
              scopedSlots: { customRender: "nameUnit" }
            },
            {
              title: '单位类别',
              dataIndex: 'dwlb',
              key: 'dwlb',
              ellipsis: true,
              scopedSlots: { customRender: "dwlb" }
            },

            {
              title: '信用等级',
              dataIndex: 'creditLevel',
              key: 'creditLevel',
              ellipsis: true,
              scopedSlots: { customRender: "creditLevel" }
            },
            {
              title: '评价年度',
              dataIndex: 'yearEval',
              key: 'yearEval',
              ellipsis: true,
              scopedSlots: { customRender: "yearEval" }
            },
            {
              title: '颁发日期',
              dataIndex: 'dataBf',
              key: 'dataBf',
              ellipsis: true,
              scopedSlots: { customRender: "dataBf" }
            },
            {
              title: '有效期至',
              dataIndex: 'effictivedateto',
              key: 'effictivedateto',
              ellipsis: true,
              scopedSlots: { customRender: "effictivedateto" }
            }
          ],
        xtpjData:[],
        xypjPageFilter: {
          pageNo:1,
          pageSize:5,
          isPass:true,

        },
        dictDW:[],
        bannerCenterData:{},
        bannerLeftData:{},
        bannerRightData:{},

      }
    },
    created(){
      this.get_credit_list();

      this.get_listtatal_list();
    },
    mounted() {
      this.dictList()
      this.get_banner_list();
    },
    methods: {
      //字典获取
      async dictList(){
        await api.get_dict().then(ser => {
          this.dictDW = ser
          // console.log(this.dictDW)
        })
      },
      dictText(val,text){
        let list = []
        var arr = (text || '').split(`,`)
        for(let item of arr){
          for(let index of this.dictDW){
            if(item === index.dictValue && val === index.dictType){
              list.push(index.dictLabel)
            }
          }
        }
        if(list.length !== 0){
          return list.toString()
        } else {
          return text
        }

      },
      onTabChange(key, type) {
        // console.log(key, type);
        this[type] = key;
      },
      sDataView(flag) {
        // console.log("1111111111111111");
        // console.log(flag);
      },
      toCreditPage(){
        this.$router.push({
          name:"creditPage",

        });
      },
     onBanner(url){
        window.open(url);
     },
     get_credit_list() {
          api.get_credit_list(this.xypjPageFilter).then(res => {
            this.xtpjData = res.rows;
          })
          .catch(err => {
          });
      },
    get_banner_list() {
        let pageFilter = {
          pageNo:1,
          pageSize:3,
          isPass:true,
        }
        api.get_banner_list(pageFilter).then(res => {
            let bannerListData = res.rows;
            console.log(res)
            if(bannerListData.length>0){
              for(let i = 0; i < bannerListData.length; i++){
                bannerListData[i].img =this.imgPath + JSON.parse(bannerListData[i].fengmian)[0].path
                if(bannerListData[i].guanggaoName=='中间'){
                  this.bannerCenterData = bannerListData[i]
                  console.log(this.bannerCenterData)
                }
                if(bannerListData[i].guanggaoName=='左侧'){
                  this.bannerLeftData = bannerListData[i]
                  console.log(this.bannerLeftData)
                }
                if(bannerListData[i].guanggaoName=='右侧'){
                  this.bannerRightData = bannerListData[i]
                  console.log(this.bannerRightData)
                }
              }
            }
          console.log(this.bannerRightData);
        })
          .catch(err => {
          });
      },
      get_listtatal_list() {
          api.get_listtatal_list().then(res => {
            let data = res.rows;
            if(data.length>0){
              this.totalData = data[0];
            }
          })
          .catch(err => {
          });
      },
    },
  };
</script>
<style lang="less">
.bannerLong{
    margin-top: 10.5px;

  }
.bannerLong:hover{
   cursor: pointer;
}
.bannerLong-no{
    margin-top: 10.5px;
    background: #ccc;
  }
.img_banner_one{
  width: 100%;
  height: 100px;

}
.tabview2{
  width: 65%;
  position: absolute;
  /* z-index: 99999; */
  height: 345px;
  margin-top: 245px;
  left: 17.5%;
}

.cardDiv2{
  height: 355px;
  background: #fff;
  margin-top: 20px;

}
.infoPublic{
  // width: 70%;
  margin-right: 40px;
  width: 860px;
  float: left;
  .ant-table {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color:#333333;
    font-size: 12px;
    font-variant: tabular-nums;
    line-height: 1;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    position: relative;
    clear: both;
  }
  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
      padding: 17.5px 11px;
      overflow-wrap: break-word;
      border-bottom: 2px dotted;
      border-color: #F1F1F1;
      text-align: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
  }
  .ant-table-thead > tr > th {
      height: 40px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      background: #fff;
      border: -1px;
      padding-bottom: 15px;
  }

 .ant-table-tbody > tr > td {
      height: 51px;
  }
.ant-table-row-cell-ellipsis, .ant-table-row-cell-ellipsis .ant-table-column-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 25px;
}
}
.statisticalData{
  width: 300px;
  padding-left: 20px;
  float: left;
  word-wrap: break-word;
  background: #fff;
}
.infoTop{
  display:flex;
  height: 25px;
  line-height:25px;
}
.infoPublicImg{
  margin-top: -2px;
}
.infoPublicText{
  width: 70%;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #337BD7;
  margin-left: 8px;
  }
  .more{
    width: 30%;
    text-align: right;
    height: 12px;
    font-size: 12px;
    font-family: SimSun;
    font-weight: 400;
    color: #666666;
  }
  .more:hover{
    color: #005AB5;
    cursor: pointer;
    // font-weight: 600;
  }


.card-div > .ant-card>.ant-card-body {
    padding: 1px;
    zoom: 1;
}
.text{
  color:#333333;
  font-size: 14px;
  font-weight: 400;
  font-family: Microsoft YaHei;
}
.num{
  color:#E82E2F;
  font-size: 14px;
  font-weight: 400;
  font-family: Microsoft YaHei;
}
.item-wrap{
   display:flex;
   width: 100%;
   height: 152.5px;
   line-height: 18px;
   padding-top: 26px;
}
.item_wrap_img{
  width: 40px;
  height: 40px;
  margin-bottom: 13px;
}
.one-item{
  width: 49%;
  text-align:center;
}
.dashed-vertical{
 height:70%;
 width: 1px;
 text-align:center;
 border: 0.5px dashed #ccc;
 padding-top: 5px;
}

.dashed-horizontal-left{
 height:1px;
 width: 45%;
 text-align:center;
 border: 0.6px dashed #ccc;
 margin-left: 10px;
 margin-right: 10px;
}
.dashed-horizontal-right{
  height:1px;
  width: 45%;
  text-align:center;
  border: 0.6px dashed #ccc;
  margin-right: 10px;
  margin-left: 10px;
}
.dashed-horizontal-div{
   display:flex;
   width: 100%;
   padding-bottom: 10px;
}
.banner_center_div{
  display:flex;
  width: 100%;
  margin-top: 20px;

}
.img_banner{
  width:580px;
  max-width:49%;
  height: 120px;
}

.img_banner-no{
  width:580px;
  max-width:49%;
  background: #ccc;
  height: 120px;
}
.img_banner_right{
  margin-left: 40px;
}
.img_banner:hover{
  cursor: pointer;
}
</style>
